<template>
	<div v-loading="loading">
		<el-card class="!border-none mb-4" shadow="never">
			<el-alert type="warning" title="微信开放平台开发设置，请前往微信开放平台>管理中心>公众号>创建网站应用" :closable="false" show-icon></el-alert>
		</el-card>
		<el-form ref="formRef" :rules="rules" :model="formData" label-width="150px">
			<el-card shadow="never" class="!border-none">
				<el-form-item label="AppID：" prop="app_id" require>
					<div class="w-[400px]">
						<el-input v-model.trim="formData.app_id" placeholder="请输入AppID"></el-input>
					</div>
				</el-form-item>
				<el-form-item label="AppSecret：" prop="app_secret" require>
					<div class="w-[400px]">
						<el-input v-model.trim="formData.app_secret" placeholder="请输入AppSecret"></el-input>
					</div>
				</el-form-item>
			</el-card>
		</el-form>
		<footerSubmit>
			<el-button v-auth="'channel/setWxOpenConfig'" type="primary" @click="handleSubmit">保存</el-button>
		</footerSubmit>
	</div>
</template>

<script lang="ts" setup name="channelWxopen">
import { ref, reactive, onMounted } from 'vue';
import { getWxopenConfig, setWxopenConfig } from '/@/api/channel/wxopen';
import { messageSuccess } from '/@/utils/message';
import commonFunction from '/@/utils/commonFunction';

const formRef = ref(null);

const loading = ref(true);

const { copyText } = commonFunction();

// 表单数据
const formData = reactive({
	app_id: '',
	app_secret: '',
});

// 表单验证
const rules = {
	app_id: [{ required: true, message: '请输入AppID', trigger: ['blur'] }],
	app_secret: [{ required: true, message: '请输入AppSecret', trigger: ['blur'] }],
};

// 获取数据
const getData = async () => {
	const data = await getWxopenConfig();
	for (const key in formData) {
		if (data[key] != null && data[key] != undefined) {
			formData[key] = data[key];
		}
	}
	loading.value = false;
};

// 保存提交
const handleSubmit = async () => {
	await formRef.value?.validate();
	await setWxopenConfig(formData);
	messageSuccess('设置成功');
	getData();
};

onMounted(() => {
	getData();
});
</script>
